import { HttpErrorResponse } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';
import { HttpService } from '../httpService';

@Component({
    selector: 'inspection-index-pie',
    styleUrls: ['./components.less'],
    template: `
        <div>
            <div echarts [options]="option1" style="height:'600px !important'"></div>
        </div>
    `
})

export class InspectionIndexPieComponent implements OnInit {
    wea: any;
    option1 = {
        color: ['#008000', '#ff0000'],
        legend: {
            bottom: '0',
            textStyle: {
                color: '#ffffff'
            }
        },
        label: {
            color: '#ffffff'
        },

        dataset: {
            source: [
                ['product', '球形摄像机统计', '红外热成像摄像机', '挂轨式巡检机器人', '综合服务器', '硬盘录像机'],
                ['正常', 15, 11, 5, 3, 19],
                ['异常', 3, 1, 0, 0, 1],

            ]
        },
        emphasis: {
            label: {
                show: true,
                width: 90,
                overflow: 'break',
                position: 'outside',
                color: '#ffffff',
                backgroundColor: 'rgba(0,0,0,0.7)',
                padding: 5
            }
        },
        series: [{
            type: 'pie',
            radius: '30%',
            center: ['25%', '30%'],
            label: {
                position: 'center',
                formatter: '球形摄像机统计:{@球形摄像机统计}'
            },
            emphasis: {
                label: {
                    formatter: '球形摄像机统计{b}{d}%',
                }
            }

        },
        {
            type: 'pie',
            radius: '30%',
            center: ['50%', '30%'],
            label: {
                position: 'center',
                formatter: '红外热成像摄像机:{@红外热成像摄像机}'
            },
            emphasis: {
                label: {
                    formatter: '红外热成像摄像机{b}{d}%',
                }
            },
            encode: {
                itemName: 'product',
                value: '红外热成像摄像机'
            }
        }, {
            type: 'pie',
            radius: '30%',
            center: ['75%', '30%'],
            label: {
                position: 'center',
                formatter: '挂轨式巡检机器人:{@挂轨式巡检机器人}'
            },
            emphasis: {
                label: {
                    formatter: '挂轨式巡检机器人{b}{d}%',
                }
            },
            encode: {
                itemName: 'product',
                value: '挂轨式巡检机器人'
            }
        }, {
            type: 'pie',
            radius: '30%',
            center: ['25%', '70%'],
            label: {
                position: 'center',
                formatter: '综合服务器:{@综合服务器}'
            },
            emphasis: {
                label: {
                    formatter: '综合服务器{b}{d}%',
                }
            },
            encode: {
                itemName: 'product',
                value: '综合服务器'
            }
        }, {
            type: 'pie',
            radius: '30%',
            center: ['50%', '70%'],
            label: {
                position: 'center',
                formatter: '硬盘录像机:{@硬盘录像机}'
            },
            emphasis: {
                label: {
                    formatter: '硬盘录像机{b}{d}%',
                }
            },
            encode: {
                itemName: 'product',
                value: '硬盘录像机'
            }
        }]
    };

    ngOnInit(): void {
        this.http.get('https://tianqiapi.com/free/day', {}, {appid: '17481778', appsecret: 'WbrjQ1rZ', vue: '1', city: '衡阳'})
        .subscribe((res) => {this.wea = res; }, (err: HttpErrorResponse) => {});
    }

    constructor(private http: HttpService) { }
}
